<template>
    <div class="container autoGrow flex-row">
        <div class="choose-type flex-column">
            <div class="layui-card flex-column choose-account-card">
                <div class="layui-card-header">选择客服账号</div>
                <div class="layui-card-body choose-account-list">
                    <label @click="accountChange(item)" :class="{ 'flex-row account-item':true,'selected': accountChecked.id === item.id }" v-for="(item) in accounts" :key="item.id">
                        <friend
                            :avatar="item.avatar"
                            :name="item.name"
                            :wxid="item.wxid"
                            :gender="item.gender"
                            class="account-item-friend"
                        />
                    </label>
                </div>
            </div>

        </div>

        <div class="detail-container autoGrow flex-column" v-if="!currentFriend.friendwxid">

            <fieldset><legend><span name="fieldset">会员列表</span></legend></fieldset>
            <div class="vip-table" v-if="1">

                <div class="vip-filter">
                    <div class="field">
                        排序依据
                        <el-select class="date-filter" size="mini" v-model="sortKey" placeholder="会员到期时间">
                            <el-option v-for="opt in sortKeys"
                                       :key="opt.value"
                                       :label="opt.label"
                                       :value="opt.value">
                            </el-option>
                        </el-select>
                    </div>

                    <div class="field">
                        微信号
                        <el-input class="date-filter" size="mini" v-model="friendName" placeholder="微信号或昵称">
                        </el-input>
                    </div>

                    <div class="field">
                    <el-radio-group class="sort-order" v-model="sortOrderValue">
                        <el-radio :label="0">倒序（从大到小）</el-radio>
                        <el-radio :label="1">正序（从小到大）</el-radio>
                    </el-radio-group>
                    </div>

                    <div class="field">
                        会员状态
                        <el-select class="member-state" size="mini" v-model="memberStateValue" placeholder="全部">
                            <el-option v-for="opt in memberStates"
                                       :key="opt.value"
                                       :label="opt.label"
                                       :value="opt.value">
                            </el-option>
                        </el-select>
                    </div>

                    <el-button @click="requestList(1)" type="primary" size="mini">确定</el-button>

                </div>

                <div class="vip-list">

                    <div class="th">
                        <div class="td">微信号</div>
                        <div class="td">App用户ID</div>
                        <div class="td">会员等级</div>
                        <div class="td">购买会员消费金额</div>
                        <div class="td">会员到期时间</div>
                        <div class="td">购买墨币消费金额</div>
                        <div class="td">近30天消费次数</div>
                        <div class="td">上次购买时间</div>
                        <div class="td">生日</div>
                        <div class="td">操作</div>
                    </div>
                    <div class="tr" v-for="(item,index) in list" :key="index">
                        <div class="td">{{item.friendalias||item.friendwxid}} ( {{item.friendnick   }} )</div>
                        <div class="td">{{item.userId}}</div>
                        <div class="td">{{item.vipProdName}}</div>
                        <div class="td">{{item.vipBuyAmount}}</div>
                        <div class="td">{{item.vipEndDate}}</div>
                        <div class="td">{{item.vcoinBuyAmount}}</div>
                        <div class="td">{{item.payNum30}}</div>
                        <div class="td">{{item.lastBuyTime}}</div>
                        <div class="td">{{item.birth}}</div>
                        <div class="td">

                            <el-button @click="navToDetail(item)" type="" size="mini">详情</el-button>

                        </div>
                    </div>
                </div>

                <el-pagination
                        :page-size="pageSize"
                        :total="pageTotal"
                        @current-change="requestList"
                        class="pagination"
                        layout="prev, pager, next" >
                </el-pagination>

            </div>



        </div>


        <div class="detail-container userDetail flex-column autoGrow" v-else>
            <fieldset><legend> <el-button @click="backList" size="mini">返回</el-button> <span name="fieldset">会员详情</span></legend></fieldset>

            <div class="flex-row" style="overflow: hidden">
                <div v-if="currentFriend.friendwxid" class="flex-column">

                    <div class="profile flex-row" v-if="currentFriend.friendwxid">
                        <div>
                            <span>{{currentFriend.friendnick}}</span>
                            <img src="../../assets/images/male.png" class="userGender" v-if="currentFriend.friendsex === 1">
                            <img src="../../assets/images/female.png" class="userGender" v-else-if="currentFriend.friendsex === 2">
                        </div>
                        <img :src="currentFriend.avatar" class="userAvatar" alt="">
                    </div>
                    <div class="detail flex-column" v-if="currentFriend.friendwxid">
                        <div>
                            <span class="fontGrey">备注</span>
                            <span>{{currentFriend.friendnick || ''}}</span>
                        </div>
                        <div>
                            <span class="fontGrey">微信号</span>
                            <span>{{currentFriend.friendalias||currentFriend.friendwxid || ''}}</span>
                        </div>
                        <div v-if="currentFriend.vipInfo">
                            <div>
                                <span class="fontGrey label-width">App账号ID</span>
                                <span>{{ currentFriend.vipInfo.userId || '' }}</span>
                            </div>
                            <div>
                                <span class="fontGrey label-width">生日</span>
                                <span>{{currentFriend.vipInfo.birth|| '' }}</span>
                            </div>
                            <div>
                                <span class="fontGrey label-width">会员类型</span>
                                <span>{{currentFriend.vipInfo.vipProdName || ''}}</span>
                            </div>
                            <div>
                                <span class="fontGrey label-width">会员到期时间</span>
                                <span>{{currentFriend.vipInfo.vipEndDate|| ''}}</span>
                            </div>
                            <div>
                                <span class="fontGrey label-width">最近一次消费时间</span>
                                <span>{{currentFriend.vipInfo.lastBuyTime || ''}}</span>
                            </div>
                            <div>
                                <span class="fontGrey label-width">会员消费总金额</span>
                                <span>{{currentFriend.vipInfo.vipBuyAmount|| ''}}元</span>
                            </div>
                            <div>
                                <span class="fontGrey label-width">充值消费总金额</span>
                                <span>{{currentFriend.vipInfo.vcoinBuyAmount || ''}}元</span>
                            </div>
                            <div>
                                <span class="fontGrey label-width">近一个月消费频次</span>
                                <span>{{currentFriend.vipInfo.payNum30|| ''}}</span>
                            </div>
                        </div>

                    </div>

                    <!--<button class="sendMessage layui-btn layui-btn-normal" @click="addChat(currentFriend)">{{currentFriend.friendwxid?'发消息':'进入群聊'}}</button>-->

                </div>
                <div class="flex-column vip-group" v-if="currentFriend.friendwxid && currentFriend.groups">
                    <div class="caption">
                        <div class="title">
                            <span>用户所在群</span>
                            <el-button @click="openInviteDialog({ csid:currentFriend.csid,wxaccount:currentFriend.wxaccount,friendwxid:(currentFriend.friendalias||currentFriend.friendwxid) })" class="btn-add-group" type="primary" icon="el-icon-plus" size="mini" round>邀请进群</el-button>
                        </div>
                        <div class="th flex-row">
                            <div class="td vip-group-name">群名</div>
                            <div class="td vip-group-isvip ">会员群</div>
                            <div class="td vip-group-ctrl ">操作</div>
                        </div>
                    </div>
                    <div class="vip-group-scroll">
                        <div class="tr" v-for="(gro) in currentFriend.groups" :key="gro.id">

                            <div class="td vip-group-name" :title="gro.groupno|| ''">{{gro.groupname|| ''}}({{gro.groupno|| ''}})</div>
                            <div class="td vip-group-isvip">{{ (gro.groupname||'').indexOf('会员')>-1?'是':'否' }}</div>
                            <div class="td vip-group-ctrl">
                                <el-button type="primary" @click="deleteUser({ csid:currentFriend.csid,wxaccount:currentFriend.wxaccount,friendwxid:gro.groupno,realFromNick:currentFriend.friendnick,realFromWxId:(currentFriend.friendalias||currentFriend.friendwxid) })" size="mini" round>移出群</el-button>
                            </div>

                        </div>
                    </div>
                </div>
            </div>




        </div>
        <dialogSelectGroup ref="dialogSelectGroup" />
    </div>
</template>
<script>
import friend from '@/components/friend'
import group from '@/components/group'
import { mapState, mapActions, mapMutations } from 'vuex';
import { getChatid,getAccountid } from '@/lib/data-translate'
import { pathOr } from 'ramda'
import dialogSelectGroup from '@/components/dialog-select-group'

export default {
    name:'vipmanager' ,

    data(){
        return {
            accountChecked:{},
            currentFriend:{

            },

            sortKey:'last_buy_time',
            memberStateValue:'全部',
            friendName:"",
            sortOrderValue:0,
            pageNo:0,
            pageSize:20,
            pageTotal:0,
            sortKeys:[
                {
                    value: 'last_buy_time',
                    label: '上次购买时间'
                },
                {
                    value: 'vip_buy_amount',
                    label: '购买会员消费金额'
                },
                {
                    value: 'vcoin_buy_amount',
                    label: '购买墨币消费金额'
                },
                {
                    value: 'pay_num_30',
                    label: '近30天消费次数'
                }

            ],
            memberStates:[
                {
                    value: '0',
                    label: '全部'
                },
                {
                    value: '1',
                    label: '会员'
                },
                {
                    value: '2',
                    label: '非会员'
                },
            ],

            list:[]

        }
    },
    mounted(){
        if(this.accounts.length){
            this.accountChange(this.accounts[0])
        }
    },
    components:{
        friend,group,dialogSelectGroup
    },
    watch:{
        accordion(val,old){
            this.chooseMessageRecord(val)
        },
        accounts(accounts){
            if(accounts.length){
                this.accountChange(accounts[0])
            }
        }
    },
    computed:{
        ...mapState(['accountMap','accountListMap','uistate', 'friendMap',
            'friendListMap',]),
        accounts(){
            const {adminid} = this.uistate
            if( adminid ===-1 || !this.accountListMap[adminid] )return []
            const accounts = this.accountListMap[adminid].map(id=>{
                const item = this.accountMap[id]
                return {
                    id:item.id,
                    csid:item.csid,
                    name:item.nick,
                    avatar:item.avatar,
                    wxid:item.wxid,
                    gender:item.gender
                }
            })
            return accounts
        } ,
        csid(){
            return this.uistate.adminid
        },
        sortOrder(){
            return this.sortOrderValue?'asc':'desc'
        },
        memberState(){
            return this.memberStateValue==1?'member':this.memberStateValue==2?'non-member':''
        },

        filterParams(){
            const account = this.accountChecked

            let params = {
                sortKey:this.sortKey ,
                sortOrder:this.sortOrder,
                pageSize:20,
                wxAccount:account.wxid,
                memberState:this.memberState
            }
            return params
        }
    },
    methods:{
        ...mapMutations(['updateUIState']),
        ...mapActions(['addChatByFriend','requestChatMap','requestFriendMap']),
        async requestList(pageNo){
            this.backList()
            const account = this.accountChecked
            const csid = this.uistate.adminid
            if(csid === -1 || !account)return;
            if(!this.sortKey)return
            if(typeof  pageNo === 'undefined'){
                pageNo = this.pageNo+1
            }
            if(pageNo == 1){
                this.list = []
            }
            try{
                let params = {
                    sortKey:this.sortKey,
                    sortOrder:this.sortOrder,
                    pageSize:this.pageSize,
                    friendName:this.friendName,
                    pageNo,
                    wxAccount:account.wxid,
                    memberState:this.memberState
                }

                const rs = await this.$api.friend.getVipFriendInfo(params)
                const count = pathOr(0,['count'],rs)
                let data = pathOr([],['data'],rs)

                if(pageNo==1){
                    this.pageTotal = count
                }

                this.list = data

            }catch (e) {
                console.log(e)
            }


        },
        reset(){
            this.keyword = ''
            this.replys = []
        },
        chooseMessageRecord(index){
            this.editRecord = index ===''?{}:this.records[+index]
            console.log(this.editRecord)
        },
        deleteMessage(record){
            this.editcontent[record.id] = ''
        },
        editMessage(message){
            console.log('editMessage')
            this.editRecord.messages.push(message)
        },
        accountChange(account){
            this.accountChecked = account
            this.accordion = ''
            this.requestList(1)
        },

        backList(){
            this.currentFriend = {}
        },
        navToDetail(item){
            this.currentFriend = {
                avatar:item.avatar,
                friendwxid:item.friendwxid,
                friendalias:item.friendalias,
                friendsex:item.friendsex,
                friendnick:item.friendnick,
                wxaccount:item.wxaccount,
                groups:[],
                vipInfo:{}
            }

            this.$api.friend.getFriendDetail({wxaccount:this.currentFriend.wxaccount,
                friendwxid:this.currentFriend.friendwxid})
                .then(rs=>{
                    this.currentFriend.groups = rs.groups
                    this.currentFriend.vipInfo = rs.vipInfo
                })


        },

        toChat(record){
            const { wxaccountid,groupaccount,csid,friends } = record;
            const accountid = getAccountid(this.accountMap,csid,wxaccountid)
            const chatid = getChatid(csid,accountid,groupaccount)
            const friend = friends[0]

            this.updateUIState({ accountid })
            this.requestChatMap({csid,wxaccount:wxaccountid})
            .then(rs=>{
                if(rs&&rs[0]){
                    this.addChatByFriend({...friend,id:undefined}) // 添加到chat相关
                    this.$router.push({
                        name: 'home',
                    })
                    setTimeout(()=>{
                        this.updateUIState({ chatid })
                    },0)

                }

            })
            // this.addChatByFriend({...friend,id:undefined}) // 添加到chat相关
        },
        deleteUser(chat) {
            const index = this.$confirm(`确定踢出 ${chat.realFromNick}?`, {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(rs=>{
                this.confirmDeleteUser(chat)
            }).catch(e=>{
                console.log(e)
            })
        },

        confirmDeleteUser(chat) {
            const { csid,wxaccount,friendwxid,realFromWxId } = chat
            this.$api.group.removeGroupMember({
                csId :csid,
                accountWxId: wxaccount,
                groupNo: friendwxid,
                memberWxId: realFromWxId
            }).then(e=>{
                this.$message({
                    message:'任务提交成功',
                    type:'success'
                })
            }).catch(e=>this.$msg(e))

        },
        async openInviteDialog(data) {
            const { csid,wxaccount,friendwxid,showstatus } = data||this.chat
            const members = this.groupMember
            const filterNos = []
            const initialNos = []

            const params = {
                csid,
                wxaccount,
                multiple:true,
                filterType:1,
                type:0,
                filterNos,
                initialNos,
                initialDisabled:true // 禁用
            }
            try {
                const rs = await this.$refs.dialogSelectGroup.getSelectFriendsAsync(params)
                const groupnos = rs.map(item=>item.groupno)
                const inviteParams = {
                    wxAccount:wxaccount, csId:csid, friendWxid:friendwxid, groupNos:groupnos.join(',')
                }
                const inviteRs = this.$api.group.sendGroupInvite(inviteParams)
            } catch (error) {

            }


        },

    },


}
</script>
<style scoped>
    .container{
        border-top: 1px solid #ccc;
        height: 100%;
        overflow: hidden;
    }
    .choose-type{
        width: 260px;
        overflow: auto;
        flex-shrink: 0;
        border-right: 1px solid #ccc;
        background: #e2e2e2;
        padding: 15px;
        box-sizing: border-box;
    }
    .choose-message{
        width: 260px;
        height: 100%;
        flex-shrink: 0;
        border-right: 1px solid #ccc;
        background: #f1f1f1;
        padding: 15px;
        box-sizing: border-box;
    }
    .account-card{
        height: 100%;
    }
    .choose-type{
        height:100%;
    }
    .choose-card{

    }
    .choose-account-card{
        height:100%;
        /* margin-bottom: 10px; */
    }
    .choose-account-list{
        height:100%;
        overflow: auto;
        padding: 0;
    }
    .account-list{
        height:100%;
        overflow: auto
    }
    .account-item{
        align-items: center;
        padding: 10px;
        cursor: pointer;
    }
    .account-item.selected{
        background-color: #eee
    }
    .account-item:last-child{
        margin-bottom: 0
    }
    .account-item-time{
        flex:1
    }
    .account-item-friend,
    .account-item-group{
        /* margin-left: 5px */
    }
    .detail-container{
        background-color: #f2f2f2;
        padding:15px;
        box-sizing: border-box;
        height: 100%;
        overflow: auto;
    }
    .detail-container fieldset {
        border: none;
        padding: 0;
        border-top: 1px solid #ddd;
        margin-bottom: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .detail-container fieldset legend {
        margin-left: 20px;
        padding: 0 10px;
        font-size: 22px;
        font-weight: 300;

        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .detail-setting .layui-tab-item{
        height: 180px;
    }
    .data-empty{
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
        height: 100%;
    }
    .detail-setting .layui-tab-content{
        padding: 0
    }


    .vip-filter{
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 14px;
        color: #606266;
    }

    .vip-filter .field{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-right: 30px;

    }
    .date-filter{
        margin-left: 5px;
    }

    .sort-order{
    }
    .sort-order .el-radio{
        margin-right: 5px;
    }

    .member-state{
        width: 90px;
        margin-left: 5px;
    }

    .vip-table{
        background-color: #ffffff;
        padding: 20px;
        border-radius: 5px;
    }
    .vip-list{
        display: table;
        width: 100%;
        margin-top: 20px;
    }
    .vip-list .th,.vip-list .tr{
        display: table-row;
        color: #606266;
    }
    .vip-list .td{
        display: table-cell;
        border-bottom: 1px solid #dddddd;
        color: #606266;
        padding: 15px;
    }
    .pagination{
        margin: 20px auto 0;
    }
</style>

<style scoped>

    .userDetail {
        padding: 24px;
    }

    .userDetail .profile {
        width: 380px;
        margin: 0 0 32px 0;
        padding-bottom: 32px;
        border-bottom: 1px solid #e8e8e8;
       display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .userDetail .profile span {
        font-size: 24px;
    }

    .userDetail .profile .userGender {
        width: 20px;
        height: 20px;
    }

    .userDetail .profile .userAvatar {
        width: 60px;
        height: 60px;
    }

    .userDetail .detail {
        width: 380px;
        font-size: 16px;
        padding-bottom: 32px;
        margin-bottom: 32px;
        border-bottom: 1px solid #e8e8e8;
        -webkit-align-items: flex-start;
        align-items: flex-start;
    }

    .userDetail .detail div {
        margin: 12px 0;
    }

    .userDetail .detail div .fontGrey {
        display: inline-block;
        width: 200px;
    }

    .userDetail .sendMessage {
        width: 120px;
        background: #1AAD19;
    }

    /** 用户详情群及会员信息 **/
    .userDetail{
        overflow: hidden;
    }
    .vip-group{
        overflow: hidden;

        display: flex;
        height: 100%;
        flex: 1;
        margin-left: 32px;
        padding: 32px;
        box-sizing: border-box;
        border-left: 1px solid #dddddd;
    }
    .vip-group .caption{

        border-bottom: 1px solid #dddddd;
    }
    .vip-group .caption .th div{
        font-size: 14px;
        text-align: left;
        white-space: nowrap;
        color: #909399;
        font-weight: 400;
        padding: 15px;
        line-height: 1.5em;
    }
    .vip-group .title{
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 18px;
    }
    .vip-group .btn-add-group{
        margin-left: 20px;
    }
    .vip-group-scroll{
        display: flex;
        height: 100%;
        flex: 1;
        overflow-y: auto;
        flex-direction: column;
    }
    .vip-group-scroll .tr{
        display: flex;
        flex-direction: row;
        border-bottom: 1px solid #dcdfe6;
    }
    .vip-group-scroll .td{
        font-size: 14px;
        text-align: left;
        white-space: nowrap;
        color: #909399;
        font-weight: 400;
        padding: 15px;
        line-height: 28px;
    }
    .vip-group-name{
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .vip-group-isvip{
        width: 120px;
        flex-shrink: 0;
    }
    .vip-group-ctrl{
        width: 120px;
        flex-shrink: 0;
    }
</style>
